<template>
  <vxe-modal v-model="dialogVisible" :ref="$attrs.ref" :title="$attrs.title || '编辑'" :width="$attrs.width" v-bind="$attrs"
             :height="$attrs.height" :resize="$attrs.resize || true" :remember="$attrs.remember || true"
             :destroy-on-close="$attrs.destroyOnClose || false" @zoom="zoom"
             :esc-closable="escClosable" :loading="loading" :fullscreen="fullscreen">
    <slot name="body"></slot>
    <div :class="isRight ? 'isRight' : 'center'">
      <div class="leftOpear">
        <slot name="leftOpear"></slot>
      </div>
      <div class="opearBtn">
        <slot name="before"></slot>
        <vxe-button v-if="saveFlag" status="primary" @click="save" size="medium" :loading="saveLoading">保存</vxe-button>
        <vxe-button v-if="closeFlag" @click="dialogVisible = false" size="medium">关闭</vxe-button>
      </div>
    </div>
  </vxe-modal>
</template>

<script>
export default {
  name: "dialogEdit",
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    }
  },
  props: {
    isRight: {
      type: Boolean,
      default() {
        return false;
      }
    },
    saveLoading: {
      type: Boolean,
      default() {
        return false;
      }
    },
    visible: {
      type: Boolean,
      default() {
        return false;
      }
    },
    saveFlag: {
      type: Boolean,
      default () {
        return true
      }
    },
    closeFlag: {
      type: Boolean,
      default () {
        return true
      }
    },
    loading: {
      type: Boolean,
      default () {
        return false
      }
    },
    fullscreen: {
      type: Boolean,
      default () {
        return false
      }
    },
    escClosable: {
      type: Boolean,
      default () {
        return true
      }
    },
  },
  data() {
    return {}
  },
  methods: {
    save() {
      this.$emit('save')
    },
    zoom ({ type, $event }) {
      this.$emit('zoom', { type, $event })
    }
  }
}
</script>

<style scoped lang="scss">
.isRight {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.center {
  text-align: center;
  .opearBtn {
    display: inline-block;
  }
}
</style>
